<template>
   <h1>Person List</h1>
   <ul>
    <li v-for="p in persons" :key="p.id"> {{ p.id }}-{{ p.name }}-{{ p.age }}</li>
   </ul>
   <h1>Person Info</h1>
   <Person001 ref="rPerson" :ren="person"/>
   <hr/>
   <button @click="showPerson">显示person信息</button>
</template>

<script lang="ts" setup>
    import Person001 from './components/Person.vue';
    import { ref,reactive } from 'vue';
    import { type PersonInfo, type Persons } from './types';

    let rPerson = ref()

    let person:PersonInfo = {
        id: '1000',
        name:'林冲', 
        age: 21
    }
    let persons = reactive<Persons>([
        {id:'10001', name:'柴进', age:30},
        {id:'10002', name:'李逵', age:34},
        {id:'10003', name:'张青', age:40},
        {id:'10004', name:'孙二娘', age:36},
        {id:'10005', name:'史进', age:27},
    ])

    function showPerson() {
        console.log(rPerson)
        console.log("Person信息：", rPerson.value.person)
        let person = rPerson.value.person
        person.name = '王老五'
    }
</script>

<style>
</style>
